<template>
  <div>
    <div v-if="showBtn" style="text-align: center; margin-bottom: 15px">
      <el-button @click="createPicture">下载证书</el-button>
    </div>
    <div class="user_img ant-modal-content">
      <img class="img_head" :src="userInfo.photoUrl" alt="" />
      <div class="title title_width" style="right: 81px; top: 135px">
        {{ userInfo.userName }}
      </div>
      <div class="title title_width" style="right: 81px; top: 195px">
        {{ userInfo.sex }}
      </div>
      <div class="title" style="right: 110px; top: 258px; font-size: 15px">
        {{ userInfo.idCardStr }}
      </div>
      <div class="title title_width" style="right: 81px; top: 320px">
        {{ userInfo.job }}
      </div>
      <div class="title title_width" style="top: 480px; left: 163px">
        {{ userInfo.certNum }}
      </div>
      <div class="title title_width" style="top: 480px; right: 55px">
        {{ userInfo.certTime }}
      </div>
      <div ref="qrCodeDiv" class="title" style="top: 447px; right: 345px"></div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";

import { plusXing } from "@/utils/config";
export default {
  props: {
    userInfo: {
      type: Object,
    },
    showBtn: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // "userInfo.id": function (val, oldVal) {
    //   console.log(val, "valval");
    //   this.popShow();
    // },
    userInfo: {
      handler() {
        if (this.userInfo.id) {
          // plusXing 150430199812457112
          this.userInfo.idCardStr = plusXing(this.userInfo.idCard, 4, 4);
          this.popShow();
        }
      },
      deep: true,
      immediate: true, // watch 的一个特点是，最初绑定的时候是不会执行的，要等到 serviceList 改变时才执行监听计算。加上改字段让他最初绑定的时候就执行
    },
  },
  data() {
    return {};
  },

  mounted() {},
  methods: {
    popShow() {
      this.$nextTick(() => {
        this.$refs.qrCodeDiv.innerHTML = "";
        new QRCode(this.$refs.qrCodeDiv, {
          text:
            "http://cert.xiongbenxiongkeji.com/#/PhoneUserMsg?id=" +
            this.userInfo.id,
          width: 80,
          height: 80,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
        });
      });
    },
    fileDownload(downloadUrl) {
      let aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = downloadUrl;
      aLink.download = this.userInfo.userName + "证书.png";
      // 触发点击-然后移除
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    },
    createPicture() {
      var _this = this;
      var targetDom = document.querySelector(".ant-modal-content");
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      html2canvas(targetDom, {
        // backgroundColor: null,
        useCORS: true, // 【重要】开启跨域配置
        logging: true,
        // useCORS: true,
      }).then(function (canvas) {
        var imgData = canvas.toDataURL();
        _this.fileDownload(imgData);
      });
    },
  },
};
</script>
<style  lang="scss" scope>
.user_img {
  text-align: center;
  position: relative;
  background: url(../assets/img/user_img.png) no-repeat;
  width: 800px;
  height: 588px;
  margin: 0 auto;
  .img_head {
    position: absolute;
    top: 287px;
    left: 172px;
    width: 105px;
    height: 142px;
  }
  .title_width {
    width: 160px;
    text-align: center;
  }
  .title {
    position: absolute;
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
